<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>AUI快速完成布局</title>
		<link rel="stylesheet" type="text/css" href="../../css/w3.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />
		<style type="text/css">
			body {
				background: #ffffff;
			}
			.bg-dark {
				background: #333333 !important;
			}
			.aui-bar-btn-item {
				background: #ffffff;
				border: none;
				border-bottom: 2px solid #ffffff;
			}
			.aui-bar-btn-item.aui-active {
				color: #039be5;
				background: #ffffff;
				border-bottom: 2px solid #039be5;
			}
			.nomore-tag {
				margin: 0 auto;
				text-align: center;
				width: auto;
				color: #333;
				padding: 20px 10px 10px 10px;
				font-size: 15px;
			}
			.title-bar {
				margin: 0 auto;
				text-align: left;
				width: auto;
				color: #333;
				padding: 3px 3px 2px 15px;
				font-size: 15px;
			}
		</style>
	</head>
	<body>
		<section class="aui-content">
			<ul class="aui-list aui-collapse aui-border">
				<div class="aui-collapse-item">
					<div id="loan_content" class="aui-collapse-content" style="display:block;">
						<li id="phone" class="aui-list-item">
							<div class="aui-list-item-inner">
								<div class="aui-list-item-label" style="width:35%; margin-right: 1rem">
									手机号码：
								</div>
								<div id="phoneText" class="aui-list-item-label" style="width:65%;"></div>
							</div>
						</li>
						<li id="nameLabel" class="aui-list-item" style="display:block">
							<div class="aui-list-item-inner">
								<div class="aui-list-item-label" style="width:35%; margin-right: 1rem">
									姓名：
								</div>
								<div class="aui-list-item-input" style="width:65%;">
									<input id="citizenNameText" type="text" placeholder="请在此输入姓名" value="">
								</div>
							</div>
						</li>
						<li id="otherAgent" class="aui-list-item" style="display:block">
							<div class="aui-list-item-inner">
								<div class="aui-list-item-label" style="width:35%; margin-right: 1rem">
									身份证号：
								</div>
								<div class="aui-list-item-input" style="width:65%;">
									<input id="citizenIdText" type="tel" placeholder="请在此输入身份证号码" value="">
								</div>
							</div>
						</li>
						<li id="saveBtn" class="aui-list-item">
							<div class="aui-list-item-inner aui-list-item-center aui-list-item-btn"  style="padding-top:0.5rem; padding-bottom:1rem">
								<div id="modifyBtn" class="aui-btn aui-btn-warning aui-margin-r-10" style="width:4.0rem;" tapmode onclick="modifyRecord()">
									修改
								</div>
								<div class="aui-btn aui-btn-info" style="width:4.0rem;" tapmode onclick="saveRecord()">
									保存
								</div>
							</div>
						</li>
					</div>
				</div>
			</ul>
		</section>
	</body>
	<script type="text/javascript" src="../../script/api.js" ></script>
	<script type="text/javascript" src="../../script/aui-tab.js" ></script>
	<script type="text/javascript" src="../../script/APICloud-rest-SHA1.js" ></script>
	<script type="text/javascript" src="../../script/aui-toast.js" ></script>
	<script type="text/javascript" src="../../script/aui-dialog.js" ></script>
	<script>
		var company_icons = ["paipai.jpg", "dianrong.jpg", "niwodai.jpg", "zhongrongtou.jpg", "junrongdai.jpg", "caimi.jpg"];
		var client = new Resource("A6928874653494", "4B6C428C-24C2-F9E7-3175-F983922E8C8F");
		var userRecord = client.Factory("user");
		var toast = new auiToast();
		var dialog = new auiDialog();
		var citizenNameBuf = "";
		var citizenIdBuf = "";
		function loadInfoDetail() {
			toast.loading({
				title : "加载中",
				duration : 2000
			}, function(ret) {
				console.log(ret);
				setTimeout(function() {
					toast.hide();
				}, 30000)
			});
			userRecord.query({
				filter : {
					"limit" : 1,
					"where" : {
						"id" : $api.getStorage('userID'),
					}
				}
			}, function(ret, err) {
				if (err) {
					//处理错误 err
					alert(JSON.stringify(err));
				} else {
					//处理数据 ret
					//alert(JSON.stringify(ret));
					var phoneText = document.getElementById("phoneText");
					var citizenNameText = document.getElementById("citizenNameText");
					var citizenIdText = document.getElementById("citizenIdText");
					phoneText.textContent = ret[0].username;
					citizenNameText.value = ret[0].citizenName;
					citizenIdText.value = ret[0].citizenId;
					disableEdit();
					toast.hide();
				}
			});
		}

		function disableEdit() {
			var list_items = document.querySelectorAll("li");
			var inputs = document.querySelectorAll("input");
			for (var i = 0; i < inputs.length; i++) {
				inputs[i].setAttribute('readOnly', 'true');
				inputs[i].placeholder = "";
			}
			for (var i = 0; i < list_items.length; i++) {
				if (list_items[i].id == "saveBtn") {
					break;
				}
				list_items[i].style.backgroundColor = "#fff";
			}
			//document.getElementById("select_agent").removeAttribute('disabled');
			//document.getElementById("select_agent").setAttribute('disabled', 'disabled');
		}

		function modifyRecord() {
			var modifyBtn = document.getElementById("modifyBtn");
			if (modifyBtn.textContent == "取消") {
				api.closeWin({
					name : 'my_info_win'
				});
			} else {
				modifyBtn.textContent = "取消"
			}
			var list_items = document.querySelectorAll("li");
			var inputs = document.querySelectorAll("input");
			for (var i = 0; i < inputs.length; i++) {
				inputs[i].removeAttribute('readOnly');
				inputs[i].placeholder = "请在此输入";
			}
			for (var i = 0; i < list_items.length; i++) {
				if (list_items[i].id == "phone" || list_items[i].id == "saveBtn") {
					continue;
				}
				list_items[i].style.backgroundColor = "#f5f5f5";
			}
		}

		function saveRecord() {
			var modifyBtn = document.getElementById("modifyBtn");
			if (modifyBtn.textContent == "修改") {
				return;
			} else {
				modifyBtn.textContent = "修改";
			}
			var citizenNameText = document.getElementById("citizenNameText");
			var citizenIdText = document.getElementById("citizenIdText");
			toast.loading({
				title : "保存中",
				duration : 2000
			}, function(ret) {
				console.log(ret);
				setTimeout(function() {
					toast.hide();
				}, 30000)
			});
			userRecord.save({
				"_id" : $api.getStorage('userID')
			}, {
				"$set" : {
					"citizenName" : citizenNameText.value,
					"citizenId" : citizenIdText.value,
				}
			}, function(ret, err) {
				if (err) {
					//处理错误 err
				} else {
					//处理数据 ret
					//alert(JSON.stringify(ret));
					toast.hide();
					toast.success({
						title : "保存成功！",
						duration : 1000
					});
					disableEdit();
				}
			})
		}

		apiready = function() {
			api.setRefreshHeaderInfo({
				visible : true,
				bgColor : '#ccc',
				textColor : '#fff',
				textDown : '下拉刷新...',
				textUp : '松开刷新...',
				showTime : true
			}, function(ret, err) {
				api.refreshHeaderLoadDone();
			});
			api.parseTapmode();
			loadInfoDetail();
		}
	</script>
</html>